﻿@{
    Layout = null;
    ViewData["Title"] = "TwoInstit";
}
<script src="~/js/vue.js"></script>
<script src="~/js/axios.js"></script>
<script src="~/element-ui/lib/index.js"></script>
<link rel="stylesheet" href="~/element-ui/lib/theme-chalk/index.css" />

<h1>II级机构设置TwoInstit</h1>
<div id="app">
    <el-row>
        <el-col :span="2"><el-button type="success" v-on:click="addkind">新增</el-button></el-col>
    </el-row>
    <el-table :data="tableData"
              style="width: 100%">
        <el-table-column prop="first_kind_name"
                         label="I级机构名称"
                         width="160">
        </el-table-column>
        <el-table-column prop="second_kind_id"
                         label="II级机构编号"
                         width="160">
        </el-table-column>
        <el-table-column prop="second_kind_name"
                         label="II级机构名称"
                         width="180">
        </el-table-column>
        <el-table-column prop="second_salary_id"
                         label="薪酬发放责任人编号"
                         width="200">
        </el-table-column>
        <el-table-column prop="second_sale_id"
                         label="销售责任人编号"
                         width="190">
        </el-table-column>
        <el-table-column label="操作" width="200">
            <template slot-scope="scope">
                <el-button size="mini"
                           v-on:click="handleEdit(scope.row)">编辑</el-button>
                <el-button size="mini"
                           type="danger"
                           v-on:click="handleDelete(scope.row.fsk_id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    @*新增模态框*@
    <el-dialog title="新增I级机构"
               :visible.sync="AdialogVisible"
               width="55%">
        <el-form ref="form" :model="second_kind" label-width="150px">
            <el-form-item label="I级机构名称">
                <el-select v-model="first_kind" value-key="first_kind_id" placeholder="请选择">
                    <el-option v-for="item in first_kinds"
                               :key="item.first_kind_id"
                               :label="item.first_kind_name"
                               :value="item">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="II级机构编号">
                <el-input v-model="second_kind.second_kind_id" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="II级机构名称">
                <el-input v-model="second_kind.second_kind_name"></el-input>
            </el-form-item>
            <el-form-item label="薪酬发放责任人编号">
                <el-input type="textarea" v-model="second_kind.second_salary_id"></el-input>
            </el-form-item>
            <el-form-item label="销售责任人编号">
                <el-input type="textarea" v-model="second_kind.second_sale_id"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button v-on:click="AdialogVisible = false">取 消</el-button>
                <el-button type="primary" v-on:click="onSubmitAdd">确 定</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    @*修改模态框*@
    <el-dialog title="修改I级机构"
               :visible.sync="UdialogVisible"
               width="55%">
        <el-form ref="form" :model="second_kind" label-width="150px">
            <el-form-item label="I级机构名称">
                <el-select v-model="first_kind" value-key="first_kind_id" placeholder="请选择">
                    <el-option v-for="item in first_kinds"
                               :key="item.first_kind_id"
                               :label="item.first_kind_name"
                               :value="item">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="II级机构编号">
                <el-input v-model="second_kind.second_kind_id" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="II级机构名称">
                <el-input v-model="second_kind.second_kind_name"></el-input>
            </el-form-item>
            <el-form-item label="薪酬发放责任人编号">
                <el-input type="textarea" v-model="second_kind.second_salary_id"></el-input>
            </el-form-item>
            <el-form-item label="销售责任人编号">
                <el-input type="textarea" v-model="second_kind.second_sale_id"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button v-on:click="UdialogVisible = false">取 消</el-button>
                <el-button type="primary" v-on:click="onSubmitUdp">确 定</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>

<script type="text/javascript">
    var vue = new Vue({
        el: "#app",
        data: {
            //集合
            tableData: [],
            //实体类
            second_kind: {
                fsk_id: '',
                first_kind_id: '',
                first_kind_name: '',
                second_kind_id: '',
                second_kind_name: '',
                second_salary_id: '',
                second_sale_id: '',
            },
            //I级机构下拉列表框集合
            first_kinds: [],
            //I级下拉列表实体类
            first_kind: {},
            //模态框开启标记
            AdialogVisible: false,
            UdialogVisible: false,
        },
        methods: {
            //刷新
            fill() {
                axios.get('/ConfigFile/TwoInstitFill').then((res) => {
                    this.tableData = res.data.tabs;
                });
            },
            //I级机构下拉列表框赋值
            firstKindSelect() {
                axios.get('/ConfigFile/OneInstitFill').then((res) => {
                    this.first_kinds = res.data.tabs
                });
            },
            //打开新增模态框
            addkind() {
                this.firstKindSelect();
                this.AdialogVisible = true;
                this.second_kind = {};
            },
            //提交新增
            onSubmitAdd() {
                axios.post('/ConfigFile/AddSecondKind', {
                    first_kind_id: this.first_kind.first_kind_id, first_kind_name: this.first_kind.first_kind_name,
                    second_kind_id: this.second_kind.second_kind_id, second_kind_name: this.second_kind.second_kind_name,
                    second_salary_id: this.second_kind.second_salary_id, second_sale_id: this.second_kind.second_sale_id
                }).then(res => {
                    this.resultInform(res.data, "新增");
                    this.AdialogVisible = false;
                });
            },
            //修改编辑按钮，打开修改模态框
            handleEdit(row) {
                //需将内存中的下拉列表框值先置空
                this.first_kind = {};
                //文本框的赋值回显
                this.second_kind = row;
                //查询下拉列表框集合
                this.firstKindSelect();
                //下拉列表框值回显绑定
                this.first_kind.first_kind_id = row.first_kind_id;
                this.first_kind.first_kind_name = row.first_kind_name;
                this.UdialogVisible = true;
            },
            //提交修改
            onSubmitUdp() {
                axios.post('/ConfigFile/UpdSecondKind', {
                    fsk_id: this.second_kind.fsk_id,
                    first_kind_id: this.first_kind.first_kind_id, first_kind_name: this.first_kind.first_kind_name,
                    second_kind_name: this.second_kind.second_kind_name, second_salary_id: this.second_kind.second_salary_id,
                    second_sale_id: this.second_kind.second_sale_id
                }).then(res => {
                    this.resultInform(res.data, "修改");
                    this.UdialogVisible = false;
                })
            },
            //删除按钮
            handleDelete(id) {
                this.$confirm("确定要删除该II级机构信息吗？", "温馨提示").then(() => {
                    axios.delete('/ConfigFile/DelSecondKind?fsk_id=' + id).then((res) => {
                        this.resultInform(res.data, "删除");
                    })
                }).catch((error) => {
                    console.info("取消删除！" + error);
                })
            },
            //结果通知方法
            resultInform(res, oper) {
                if (res > 0) {
                    this.openmessuc("II级机构" + oper + "成功！");
                    this.fill();
                } else {
                    this.openmeswar("II级机构" + oper + "有误！");
                }
            },
            //成功弹窗
            openmessuc: function(mes) {
                this.$message({
                    message: mes,
                    type: 'success'
                });
            },
            //警告弹窗
            openmeswar: function(mes) {
                this.$message({
                    message: mes,
                    type: 'danger'
                });
            },
        },
        mounted: function() {
            this.fill();
        }
    });
</script>